<template>
  <view class="content">
    <view class="payBox" v-for="order in orderList">
      <view class="blackLine"></view>
      <view class="payment">
        <view class="paymentItem" v-for="item in order.items">
          <image class="paymentImg" :src="item.productImg" />
          <view style="width: 200rpx">{{ item.productName }} x {{ item.buyNum }}</view>
        </view>
      </view>
      <fui-list-cell>
        <text>订单状态</text>
        <text class="fui-text__explain">{{ order.order.status === 1 ? "已完成" : "未完成" }}</text>
      </fui-list-cell>
      <fui-list-cell>
        <text>支付金额</text>
        <text class="fui-text__explain">{{ order.order.totalAmount }}</text>
      </fui-list-cell>
      <view class="blackLine"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import fuiList from "@/components/firstui/fui-list/fui-list.vue";
import fuiListCell from "@/components/firstui/fui-list-cell/fui-list-cell.vue";
import fuiInput from "@/components/firstui/fui-input/fui-input.vue";
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue";
import Nav from "@/router";
import Store from "@/store";
import Service from "@/service";
import { ref } from "vue";
const orderList = ref<Array<any>>([]);
const getOrderList = () => {
  Service.Pay.orderList().then(res => {
    console.log(res);

    orderList.value = res.data;
  });
};
getOrderList();
</script>
<style scoped>
.content {
  width: 750rpx;
  padding-bottom: 200rpx;
}
.payBox {
  width: 750rpx;
  border-radius: 20rpx;
}
.blackLine {
  width: 750rpx;
  height: 10rpx;
  background-image: radial-gradient(black, white, black);
  border-radius: 50%;
  margin: 20rpx 0;
}
.payment {
  width: 750rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.paymentItem {
  width: 250rpx;
  height: 300rpx;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.paymentImg {
  width: 200rpx;
  height: 200rpx;
}
.price {
  font-size: 40rpx;
  font-weight: bold;
}
.decrease {
  color: red;
}
</style>
